import React, { useState, useEffect, useCallback } from 'react';
import {
  Card,
  Table,
  Button,
  Tag,
  Space,
  Modal,
  Form,
  Input,
  Select,
  message,
  Avatar,
  Image,
  Tooltip,
  Badge,
  Statistic,
  Row,
  Col,
  DatePicker,
  Divider,
  Typography,
  Progress,
  Timeline,
  Rate,
  Switch,
  Checkbox,
  Popconfirm,
  Drawer,
  Alert,
  Radio,
  InputNumber
} from 'antd';
import ResizableTable from './ResizableTable';
import {
  EyeOutlined,
  CheckOutlined,
  CloseOutlined,
  UserOutlined,
  HeartOutlined,
  ShareAltOutlined,
  EditOutlined,
  TrophyOutlined,
  FireOutlined,
  StarOutlined,
  GiftOutlined,
  ThunderboltOutlined,
  CrownOutlined,
  DownloadOutlined,
  SelectOutlined,
  InfoCircleOutlined,
  ClockCircleOutlined
} from '@ant-design/icons';
import dayjs from 'dayjs';
import api from '../utils/api';
import { getErrorMessage, getSuccessMessage, ERROR_TYPES, SUCCESS_TYPES } from '../utils/i18n';

const { RangePicker } = DatePicker;
const { Option } = Select;
const { Text, Title } = Typography;
const { TextArea } = Input;

const SocialMediaReview = () => {
  const [submissions, setSubmissions] = useState([]);
  const [loading, setLoading] = useState(false);
  const [reviewModalVisible, setReviewModalVisible] = useState(false);
  const [detailDrawerVisible, setDetailDrawerVisible] = useState(false);
  const [currentSubmission, setCurrentSubmission] = useState(null);
  const [reviewForm] = Form.useForm();
  const [batchForm] = Form.useForm();
  const [filters, setFilters] = useState({
    status: 'all',
    platform: 'all',
    dateRange: null,
  });
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [batchReviewVisible, setBatchReviewVisible] = useState(false);
  const [stats, setStats] = useState({
    total: 0,
    pending: 0,
    approved: 0,
    rejected: 0,
    todaySubmissions: 0,
    totalPoints: 0
  });
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 0,
  });

  const fetchStats = useCallback(async () => {
    try {
      const response = await api.get('/social-media/stats');
      if (response.data.success) {
        setStats(response.data.data);
      }
    } catch (error) {
      console.error('获取统计数据失败:', error);
      message.error(getErrorMessage('SOCIAL_REVIEW', ERROR_TYPES.STATS_LOAD_FAILED));
    }
  }, []);

  const fetchSubmissions = useCallback(async () => {
    setLoading(true);
    try {
      const { status, platform, dateRange } = filters;
      const queryParams = { 
        page: pagination.current,
        limit: pagination.pageSize,
        status: status !== 'all' ? status : undefined,
        platform: platform !== 'all' ? platform : undefined,
        startDate: dateRange?.[0]?.format('YYYY-MM-DD'),
        endDate: dateRange?.[1]?.format('YYYY-MM-DD'),
      };

      const response = await api.get('/social-media/submissions', { params: queryParams });
      if (response.data.success) {
        setSubmissions(response.data.data);
        setPagination(prev => ({
          ...prev,
          total: response.data.pagination.total,
        }));
      } else {
        message.error(getErrorMessage('SOCIAL_REVIEW', ERROR_TYPES.SUBMISSIONS_LOAD_FAILED) + ': ' + response.data.message);
      }
    } catch (error) {
      console.error('获取提交记录失败:', error);
      message.error(getErrorMessage('SOCIAL_REVIEW', ERROR_TYPES.SUBMISSIONS_LOAD_FAILED));
    } finally {
      setLoading(false);
    }
  }, [filters, pagination.current, pagination.pageSize]);
  
  useEffect(() => {
    fetchSubmissions();
  }, [fetchSubmissions]);
  
  useEffect(() => {
    fetchStats();
  }, [fetchStats]);

  const handleTableChange = (newPagination) => {
    setPagination(p => ({ ...p, current: newPagination.current, pageSize: newPagination.pageSize }));
  };

  const handleFilterChange = (change) => {
    setFilters(prev => ({ ...prev, ...change }));
    setPagination(p => ({ ...p, current: 1 }));
  };

  const resetFilters = () => {
    setFilters({
      status: 'all',
      platform: 'all',
      dateRange: null,
    });
    setPagination(p => ({ ...p, current: 1 }));
  };

  const handleReview = (record) => {
    setCurrentSubmission(record);
    setReviewModalVisible(true);
    reviewForm.setFieldsValue({
      status: record.status,
      reviewNotes: record.reviewNotes,
      pointsAwarded: record.pointsAwarded
    });
  };

  // 统计卡片点击筛选
  const handleStatCardClick = (status) => {
    handleFilterChange({ status });
  };

  // Excel导出功能
  const handleExportExcel = async () => {
    try {
      setLoading(true);
      const exportData = submissions.map(item => ({
        '用户姓名': item.userName,
        '用户ID': item.userId,
        '平台': item.platform,
        '互动类型': getInteractionText(item.interactionType),
        '内容描述': item.description,
        '提交时间': item.submissionDate,
        '审核状态': getStatusText(item.status),
        '奖励积分': item.pointsAwarded,
        '审核备注': item.reviewNotes || '无'
      }));
      
      // 创建CSV内容
      const headers = Object.keys(exportData[0] || {});
      const csvContent = [
        headers.join(','),
        ...exportData.map(row => headers.map(header => `"${row[header] || ''}"`).join(','))
      ].join('\n');
      
      // 下载文件
      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = `社交媒体评价_${dayjs().format('YYYY-MM-DD')}.csv`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
      
      message.success(getSuccessMessage('SOCIAL_REVIEW', SUCCESS_TYPES.EXPORT_SUCCESS));
    } catch (error) {
      message.error(getErrorMessage('SOCIAL_REVIEW', ERROR_TYPES.EXPORT_FAILED));
    } finally {
      setLoading(false);
    }
  };

  // 查看详情
  const handleViewDetail = (record) => {
    setCurrentSubmission(record);
    setDetailDrawerVisible(true);
  };

  // 批量审核
  const handleBatchReview = async (status, points, notes) => {
    if (selectedRowKeys.length === 0) {
      message.warning('请先选择要批量审核的项目');
      return;
    }
    
    setLoading(true);
    try {
      const results = await Promise.all(
        selectedRowKeys.map(id => 
          api.put(`/admin/social-media/review/${id}`, {
            status,
            reviewNotes: notes,
            pointsAwarded: status === 'approved' ? points : 0,
          })
        )
      );

      const successCount = results.filter(res => res.success).length;
      const failureCount = results.length - successCount;

      if (failureCount > 0) {
        message.warning(`${successCount} 个提交审核成功, ${failureCount} 个失败。`);
      } else {
        message.success(`已成功批量审核 ${successCount} 个提交。`);
      }

      setSelectedRowKeys([]);
      setBatchReviewVisible(false);
      batchForm.resetFields();
      fetchSubmissions();
      fetchStats();
    } catch (error) {
      message.error(getErrorMessage('SOCIAL_REVIEW', ERROR_TYPES.BATCH_REVIEW_FAILED));
    } finally {
      setLoading(false);
    }
  };

  const handleReviewSubmit = async () => {
    try {
      const values = await reviewForm.validateFields();
      const response = await api.put(`/admin/social-media/review/${currentSubmission._id}`, values);

      if (response.data.success) {
        message.success(getSuccessMessage('SOCIAL_REVIEW', SUCCESS_TYPES.REVIEW_SUCCESS));
        setReviewModalVisible(false);
        fetchSubmissions(); // 重新获取列表
        fetchStats(); // 更新统计数据
      } else {
        message.error(getErrorMessage('SOCIAL_REVIEW', ERROR_TYPES.REVIEW_FAILED) + ': ' + response.data.message);
      }
    } catch (error) {
      message.error(getErrorMessage('SOCIAL_REVIEW', ERROR_TYPES.REVIEW_FAILED));
    }
  };

  const getStatusColor = (status) => {
    switch (status) {
      case 'pending': return '#faad14';
      case 'approved': return '#52c41a';
      case 'rejected': return '#ff4d4f';
      default: return '#d9d9d9';
    }
  };

  const getStatusText = (status) => {
    switch (status) {
      case 'pending': return '待审核';
      case 'approved': return '已通过';
      case 'rejected': return '已拒绝';
      default: return '未知';
    }
  };

  // 获取状态标签
  const getStatusTag = (status) => {
    const statusConfig = {
      pending: { color: 'orange', text: '待审核' },
      approved: { color: 'green', text: '已通过' },
      rejected: { color: 'red', text: '已拒绝' }
    };
    const config = statusConfig[status] || statusConfig.pending;
    return (
      <Tag color={config.color} style={{ borderRadius: '12px', fontWeight: '500' }}>
        {config.text}
      </Tag>
    );
  };

  const getPlatformIcon = (platform) => {
    switch (platform.toLowerCase()) {
      case 'instagram': return '📷';
      case 'tiktok': return '🎵';
      case 'facebook': return '👥';
      case 'youtube': return '📺';
      case '小红书': return '📖';
      case 'weibo': return '🐦';
      default: return '🌐';
    }
  };

  const getInteractionIcon = (type) => {
    switch (type) {
      case 'like': return <HeartOutlined style={{ color: '#ff4d4f' }} />;
      case 'share': return <ShareAltOutlined style={{ color: '#1890ff' }} />;
      case 'original': return <EditOutlined style={{ color: '#52c41a' }} />;
      default: return <StarOutlined />;
    }
  };

  const getInteractionText = (type) => {
    switch (type) {
      case 'like': return '点赞';
      case 'share': return '转发';
      case 'original': return '原创';
      default: return '其他';
    }
  };

  // 调试信息
 

  const columns = [
    {
      title: '用户信息',
      key: 'user',
      width: 200,
      resizable: true,
      render: (_, record) => (
        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
          <Avatar 
            src={record.userId.avatar} 
            icon={<UserOutlined />}
            size={40}
            style={{
              border: '2px solid #f0f0f0',
              boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
            }}
          />
          <div>
            <div style={{ fontWeight: '600', color: '#262626' }}>
              {record.userId.name}
            </div>
            <div style={{ fontSize: '12px', color: '#8c8c8c' }}>
              ID: {record.userId._id}
            </div>
          </div>
        </div>
      )
    },
    {
      title: '平台 & 互动',
      key: 'platform',
      width: 150,
      resizable: true,
      render: (_, record) => (
        <div style={{ textAlign: 'center' }}>
          <div style={{ 
            fontSize: '24px', 
            marginBottom: '4px',
            filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.1))'
          }}>
            {getPlatformIcon(record.platform)}
          </div>
          <div style={{ fontWeight: '500', marginBottom: '2px' }}>
            {record.platform}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '4px' }}>
            {getInteractionIcon(record.interactionType)}
            <span style={{ fontSize: '12px' }}>
              {getInteractionText(record.interactionType)}
            </span>
          </div>
        </div>
      )
    },
    {
      title: '内容描述',
      dataIndex: 'description',
      key: 'description',
      resizable: true,
      ellipsis: {
        showTitle: false,
      },
      render: (description) => (
        <Tooltip placement="topLeft" title={description}>
          <div style={{ 
            maxWidth: '300px',
            lineHeight: '1.4',
            color: '#595959'
          }}>
            {description}
          </div>
        </Tooltip>
      )
    },
    {
      title: '提交时间',
      dataIndex: 'submissionDate',
      key: 'submissionDate',
      width: 120,
      resizable: true,
      render: (date) => (
        <div style={{ fontSize: '12px' }}>
          <div>{dayjs(date).format('MM-DD')}</div>
          <div style={{ color: '#8c8c8c' }}>
            {dayjs(date).format('HH:mm')}
          </div>
        </div>
      )
    },
    {
      title: '状态',
      key: 'status',
      width: 100,
      resizable: true,
      render: (_, record) => {
        const color = getStatusColor(record.status);
        const text = getStatusText(record.status);
        
        return (
          <Tag 
            color={color}
            style={{
              borderRadius: '16px',
              padding: '4px 12px',
              border: 'none',
              fontWeight: '500',
              fontSize: '12px'
            }}
          >
            {text}
          </Tag>
        );
      }
    },
    {
      title: '积分',
      key: 'points',
      width: 80,
      resizable: true,
      render: (_, record) => (
        <div style={{ textAlign: 'center' }}>
          <div style={{
            fontSize: '16px',
            fontWeight: '600',
            color: record.status === 'approved' ? '#52c41a' : '#8c8c8c'
          }}>
            {record.status === 'approved' ? record.pointsAwarded : 0}
          </div>
          <div style={{ fontSize: '10px', color: '#8c8c8c' }}>积分</div>
        </div>
      )
    },
    {
      title: '操作',
      key: 'action',
      width: 160,
      resizable: true,
      render: (_, record) => (
        <Space>
          <Tooltip title="查看详情">
            <Button
              type="default"
              icon={<InfoCircleOutlined />}
              size="small"
              onClick={() => handleViewDetail(record)}
              style={{
                borderRadius: '6px'
              }}
            >
              详情
            </Button>
          </Tooltip>
          <Tooltip title="审核">
            <Button
              type="primary"
              icon={<EyeOutlined />}
              size="small"
              onClick={() => handleReview(record)}
              style={{
                borderRadius: '6px',
                boxShadow: '0 2px 4px rgba(24,144,255,0.2)'
              }}
            >
              审核
            </Button>
          </Tooltip>
        </Space>
      )
    }
  ];

  return (
    <div className="modern-page-container">
      {/* 页面标题 */}
      <div className="modern-page-header">
        <Title level={2} className="modern-page-title">
          <div className="stat-icon-wrapper">
            <TrophyOutlined className="stat-icon" />
          </div>
          社交媒体互动审核
        </Title>
        <Text className="page-subtitle">
          管理会员社交媒体互动提交，审核并发放积分奖励
        </Text>
      </div>

      {/* 统计卡片 */}
      <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
        <Col xs={24} sm={12} md={6}>
          <Card hoverable onClick={() => handleStatCardClick('all')}>
            <Statistic title="总提交" value={stats.total} prefix={<DownloadOutlined />} />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card hoverable onClick={() => handleStatCardClick('pending')}>
            <Statistic title="待审核" value={stats.pending} prefix={<ClockCircleOutlined />} valueStyle={{ color: '#faad14' }} />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card hoverable onClick={() => handleStatCardClick('approved')}>
            <Statistic title="已通过" value={stats.approved} prefix={<CheckOutlined />} valueStyle={{ color: '#52c41a' }} />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card hoverable onClick={() => handleStatCardClick('rejected')}>
            <Statistic title="已拒绝" value={stats.rejected} prefix={<CloseOutlined />} valueStyle={{ color: '#ff4d4f' }} />
          </Card>
        </Col>
      </Row>

      {/* 筛选器 */}
      <Card className="modern-card glass-card hover-lift">
        <Row gutter={[16, 16]} align="middle">
          <Col>
            <Text strong style={{ color: '#262626' }}>筛选条件：</Text>
          </Col>
          <Col>
            <Select
              value={filters.status}
              onChange={(value) => handleFilterChange({ status: value })}
              style={{ width: 120 }}
              placeholder="状态"
            >
              <Option value="all">全部状态</Option>
              <Option value="pending">待审核</Option>
              <Option value="approved">已通过</Option>
              <Option value="rejected">已拒绝</Option>
            </Select>
          </Col>
          <Col>
            <Select
              value={filters.platform}
              onChange={(value) => handleFilterChange({ platform: value })}
              style={{ width: 120 }}
              placeholder="平台"
            >
              <Option value="all">全部平台</Option>
              <Option value="Instagram">Instagram</Option>
              <Option value="TikTok">TikTok</Option>
              <Option value="Facebook">Facebook</Option>
              <Option value="YouTube">YouTube</Option>
              <Option value="小红书">小红书</Option>
              <Option value="微博">微博</Option>
            </Select>
          </Col>
          <Col>
            <RangePicker
              value={filters.dateRange}
              onChange={(value) => handleFilterChange({ dateRange: value })}
              placeholder={['开始日期', '结束日期']}
              style={{ width: 240 }}
            />
          </Col>
          <Col>
            <Button 
              onClick={resetFilters}
            >
              重置
            </Button>
          </Col>
          <Col>
            <Button 
              type="primary"
              icon={<DownloadOutlined />}
              onClick={handleExportExcel}
              className="gradient-button"
            >
              导出Excel
            </Button>
          </Col>
          {selectedRowKeys.length > 0 && (
            <Col>
              <Space>
                <Button 
                  type="primary"
                  icon={<CheckOutlined />}
                  onClick={() => setBatchReviewVisible(true)}
                  className="gradient-button"
                  style={{ background: 'linear-gradient(135deg, #52c41a 0%, #73d13d 100%)' }}
                >
                  批量审核 ({selectedRowKeys.length})
                </Button>
              </Space>
            </Col>
          )}
        </Row>
      </Card>

      {/* 数据表格 */}
      <Card className="modern-card glass-card hover-lift">
        <ResizableTable
          columns={columns}
          dataSource={submissions}
          rowKey="_id"
          loading={loading}
          className="modern-table"
          rowSelection={{
            selectedRowKeys,
            onChange: setSelectedRowKeys,
            getCheckboxProps: (record) => ({
              disabled: record.status !== 'pending'
            })
          }}
          onChange={handleTableChange}
          pagination={{
            current: pagination.current,
            pageSize: pagination.pageSize,
            total: pagination.total,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条`
          }}
        />
      </Card>

      {/* 审核模态框 */}
      <Modal
        title={
          <div style={{ 
            display: 'flex', 
            alignItems: 'center', 
            gap: '12px',
            color: '#262626'
          }}>
            <StarOutlined style={{ color: '#1890ff' }} />
            社交媒体互动审核
          </div>
        }
        open={reviewModalVisible}
        onOk={handleReviewSubmit}
        onCancel={() => {
          setReviewModalVisible(false);
          setCurrentSubmission(null);
          reviewForm.resetFields();
        }}
        width={800}
        okText="确认审核"
        cancelText="取消"
        style={{
          '.ant-modal-content': {
            borderRadius: '16px'
          }
        }}
      >
        {currentSubmission && (
          <div>
            {/* 用户信息 */}
            <Card 
              size="small" 
              style={{ 
                marginBottom: '16px',
                borderRadius: '12px',
                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
              }}
            >
              <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
                <Avatar 
                  src={currentSubmission.userId.avatar} 
                  size={60}
                  style={{ border: '3px solid rgba(255,255,255,0.3)' }}
                />
                <div style={{ flex: 1 }}>
                  <div style={{ color: '#fff', fontSize: '18px', fontWeight: '600', marginBottom: '4px' }}>
                    {currentSubmission.userId.name}
                  </div>
                  <div style={{ color: 'rgba(255,255,255,0.8)', fontSize: '14px' }}>
                    用户ID: {currentSubmission.userId._id}
                  </div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ color: '#fff', fontSize: '14px' }}>
                    {getPlatformIcon(currentSubmission.platform)} {currentSubmission.platform}
                  </div>
                  <div style={{ color: 'rgba(255,255,255,0.8)', fontSize: '12px' }}>
                    {getInteractionText(currentSubmission.interactionType)}
                  </div>
                </div>
              </div>
            </Card>

            {/* 提交内容 */}
            <div style={{ marginBottom: '16px' }}>
              <Text strong>内容描述：</Text>
              <div style={{ 
                marginTop: '8px',
                padding: '12px',
                background: '#f5f5f5',
                borderRadius: '8px',
                lineHeight: '1.6'
              }}>
                {currentSubmission.description}
              </div>
            </div>

            {/* 链接和图片 */}
            <Row gutter={16} style={{ marginBottom: '16px' }}>
              {currentSubmission.link && (
                <Col span={12}>
                  <Text strong>相关链接：</Text>
                  <div style={{ marginTop: '8px' }}>
                    <a 
                      href={currentSubmission.link} 
                      target="_blank" 
                      rel="noopener noreferrer"
                      style={{ 
                        color: '#1890ff',
                        textDecoration: 'none',
                        fontSize: '12px',
                        wordBreak: 'break-all'
                      }}
                    >
                      {currentSubmission.link}
                    </a>
                  </div>
                </Col>
              )}
              {currentSubmission.imageUrl && (
                <Col span={12}>
                  <Text strong>提交图片：</Text>
                  <div style={{ marginTop: '8px' }}>
                    <Image
                      src={currentSubmission.imageUrl}
                      alt="提交图片"
                      style={{ 
                        maxWidth: '100%',
                        borderRadius: '8px',
                        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
                      }}
                    />
                  </div>
                </Col>
              )}
            </Row>

            <Divider />

            {/* 审核表单 */}
            <Form form={reviewForm} layout="vertical">
              <Row gutter={16}>
                <Col span={12}>
                  <Form.Item
                    name="status"
                    label="审核状态"
                    rules={[{ required: true, message: '请选择审核状态' }]}
                  >
                    <Select placeholder="请选择审核状态">
                      <Option value="pending">待审核</Option>
                      <Option value="approved">通过</Option>
                      <Option value="rejected">拒绝</Option>
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="pointsAwarded"
                    label="奖励积分"
                    rules={[{ required: true, message: '请输入奖励积分' }]}
                  >
                    <Input type="number" placeholder="请输入积分" />
                  </Form.Item>
                </Col>
              </Row>
              <Form.Item
                name="reviewNotes"
                label="审核备注"
              >
                <TextArea 
                  rows={3} 
                  placeholder="请输入审核备注（可选）"
                  style={{ borderRadius: '8px' }}
                />
              </Form.Item>
            </Form>
          </div>
        )}
      </Modal>

      {/* 详情查看抽屉 */}
      <Drawer
        title={
          <div style={{ 
            display: 'flex', 
            alignItems: 'center', 
            gap: '12px',
            color: '#262626'
          }}>
            <InfoCircleOutlined style={{ color: '#1890ff' }} />
            互动详情
          </div>
        }
        placement="right"
        width={600}
        open={detailDrawerVisible}
        onClose={() => {
          setDetailDrawerVisible(false);
          setCurrentSubmission(null);
        }}
        style={{
          '.ant-drawer-content': {
            borderRadius: '16px 0 0 16px'
          }
        }}
      >
        {currentSubmission && (
          <div>
            {/* 用户信息卡片 */}
            <Card 
              size="small" 
              style={{ 
                marginBottom: '16px',
                borderRadius: '12px',
                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
              }}
            >
              <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
                <Avatar 
                  src={currentSubmission.userId.avatar} 
                  size={60}
                  style={{ border: '3px solid rgba(255,255,255,0.3)' }}
                />
                <div style={{ flex: 1 }}>
                  <div style={{ color: '#fff', fontSize: '18px', fontWeight: '600', marginBottom: '4px' }}>
                    {currentSubmission.userId.name}
                  </div>
                  <div style={{ color: 'rgba(255,255,255,0.8)', fontSize: '14px' }}>
                    用户ID: {currentSubmission.userId._id}
                  </div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ color: '#fff', fontSize: '16px', marginBottom: '4px' }}>
                    {getPlatformIcon(currentSubmission.platform)} {currentSubmission.platform}
                  </div>
                  <div style={{ color: 'rgba(255,255,255,0.8)', fontSize: '14px' }}>
                    {getInteractionText(currentSubmission.interactionType)}
                  </div>
                </div>
              </div>
            </Card>

            {/* 提交信息 */}
            <Card title="提交信息" style={{ marginBottom: '16px', borderRadius: '12px' }}>
              <div style={{ marginBottom: '12px' }}>
                <Text strong>内容描述：</Text>
                <div style={{ 
                  marginTop: '8px',
                  padding: '12px',
                  background: '#f8f9fa',
                  borderRadius: '8px',
                  lineHeight: '1.6',
                  border: '1px solid #e9ecef'
                }}>
                  {currentSubmission.description}
                </div>
              </div>
              
              <div style={{ marginBottom: '12px' }}>
                <Text strong>提交时间：</Text>
                <div style={{ marginTop: '4px', color: '#666' }}>
                  {currentSubmission.submissionDate}
                </div>
              </div>

              {currentSubmission.link && (
                <div style={{ marginBottom: '12px' }}>
                  <Text strong>相关链接：</Text>
                  <div style={{ marginTop: '4px' }}>
                    <a 
                      href={currentSubmission.link} 
                      target="_blank" 
                      rel="noopener noreferrer"
                      style={{ 
                        color: '#1890ff',
                        textDecoration: 'none',
                        fontSize: '14px',
                        wordBreak: 'break-all'
                      }}
                    >
                      {currentSubmission.link}
                    </a>
                  </div>
                </div>
              )}
            </Card>

            {/* 审核状态 */}
            <Card title="审核状态" style={{ marginBottom: '16px', borderRadius: '12px' }}>
              <Row gutter={16}>
                <Col span={12}>
                  <div style={{ textAlign: 'center' }}>
                    <div style={{ fontSize: '24px', marginBottom: '8px' }}>
                      <Tag 
                        color={getStatusColor(currentSubmission.status)}
                        style={{
                          borderRadius: '16px',
                          padding: '4px 12px',
                          border: 'none',
                          fontWeight: '500',
                          fontSize: '12px'
                        }}
                      >
                        {getStatusText(currentSubmission.status)}
                      </Tag>
                    </div>
                    <Text type="secondary">当前状态</Text>
                  </div>
                </Col>
                <Col span={12}>
                  <div style={{ textAlign: 'center' }}>
                    <div style={{ 
                    fontSize: '24px', 
                    fontWeight: '600',
                    color: currentSubmission.status === 'approved' ? '#52c41a' : '#8c8c8c',
                    marginBottom: '8px'
                  }}>
                    {currentSubmission.status === 'approved' ? currentSubmission.pointsAwarded : 0}
                  </div>
                    <Text type="secondary">获得积分</Text>
                  </div>
                </Col>
              </Row>
              
              {currentSubmission.reviewNotes && (
                <div style={{ marginTop: '16px' }}>
                  <Text strong>审核备注：</Text>
                  <div style={{ 
                    marginTop: '8px',
                    padding: '12px',
                    background: '#f8f9fa',
                    borderRadius: '8px',
                    border: '1px solid #e9ecef'
                  }}>
                    {currentSubmission.reviewNotes}
                  </div>
                </div>
              )}
            </Card>

            {/* 提交图片 */}
            {currentSubmission.imageUrl && (
              <Card title="提交图片" style={{ borderRadius: '12px' }}>
                <div style={{ textAlign: 'center' }}>
                  <Image
                    src={currentSubmission.imageUrl}
                    alt="提交图片"
                    style={{ 
                      maxWidth: '100%',
                      borderRadius: '12px',
                      boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
                    }}
                  />
                </div>
              </Card>
            )}
          </div>
        )}
      </Drawer>

      {/* 批量审核模态框 */}
      <Modal
        title={
          <div style={{ 
            display: 'flex', 
            alignItems: 'center', 
            gap: '12px',
            color: '#262626'
          }}>
            <SelectOutlined style={{ color: '#1890ff' }} />
            批量审核 ({selectedRowKeys.length} 项)
          </div>
        }
        open={batchReviewVisible}
        onCancel={() => {
          setBatchReviewVisible(false);
          batchForm.resetFields();
        }}
        footer={[
          <Button key="cancel" onClick={() => {
            setBatchReviewVisible(false);
            batchForm.resetFields();
          }}>
            取消
          </Button>,
          <Button
            key="submit"
            type="primary"
            loading={loading}
            onClick={() => {
              batchForm.validateFields().then(values => {
                handleBatchReview(values.status, values.points, values.notes);
              }).catch(() => {
                message.error(getErrorMessage('SOCIAL_REVIEW', ERROR_TYPES.FORM_VALIDATION_FAILED));
              });
            }}
          >
            批量审核 ({selectedRowKeys.length})
          </Button>
        ]}
        width={600}
        style={{
          '.ant-modal-content': {
            borderRadius: '16px'
          }
        }}
      >
        <div style={{ marginBottom: '20px' }}>
          <Alert
            message={`您选择了 ${selectedRowKeys.length} 个待审核的提交`}
            description="批量审核将对所有选中的提交应用相同的审核结果和积分奖励。"
            type="info"
            showIcon
            style={{ borderRadius: '8px' }}
          />
        </div>

        <Form form={batchForm} layout="vertical">
          <Form.Item
            name="status"
            label="审核结果"
            rules={[{ required: true, message: '请选择审核结果' }]}
          >
            <Radio.Group>
              <Radio value="approved" style={{ fontSize: '16px' }}>
                <span style={{ color: '#52c41a', fontWeight: '500' }}>✓ 通过</span>
              </Radio>
              <Radio value="rejected" style={{ fontSize: '16px' }}>
                <span style={{ color: '#ff4d4f', fontWeight: '500' }}>✗ 拒绝</span>
              </Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item
            name="points"
            label="奖励积分"
            rules={[
              { required: true, message: '请输入奖励积分' },
              { type: 'number', min: 0, max: 100, message: '积分范围为0-100' }
            ]}
          >
            <InputNumber
              min={0}
              max={100}
              style={{ width: '100%' }}
              placeholder="请输入奖励积分"
              addonAfter="积分"
            />
          </Form.Item>

          <Form.Item
            name="notes"
            label="审核备注"
            rules={[{ required: true, message: '请输入审核备注' }]}
          >
            <TextArea
              rows={4}
              placeholder="请输入审核备注，说明审核理由..."
              style={{ borderRadius: '8px' }}
            />
          </Form.Item>
        </Form>

        {/* 选中项目预览 */}
        <div style={{ marginTop: '20px' }}>
          <Text strong style={{ marginBottom: '12px', display: 'block' }}>选中的提交预览：</Text>
          <div style={{ 
            maxHeight: '200px', 
            overflowY: 'auto',
            border: '1px solid #d9d9d9',
            borderRadius: '8px',
            padding: '12px'
          }}>
            {selectedRowKeys.map(key => {
              const submission = submissions.find(s => s._id === key);
              return submission ? (
                <div key={key} style={{ 
                  display: 'flex', 
                  alignItems: 'center', 
                  gap: '12px',
                  padding: '8px',
                  marginBottom: '8px',
                  background: '#f8f9fa',
                  borderRadius: '6px'
                }}>
                  <Avatar src={submission.userId.avatar} size={32} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: '500', fontSize: '14px' }}>
                      {submission.userId.name}
                    </div>
                    <div style={{ color: '#666', fontSize: '12px' }}>
                      {getPlatformIcon(submission.platform)} {submission.platform} · {getInteractionText(submission.interactionType)}
                    </div>
                  </div>
                  <div style={{ fontSize: '12px', color: '#999' }}>
                    {submission.submissionDate}
                  </div>
                </div>
              ) : null;
            })}
          </div>
        </div>
      </Modal>
    </div>
  );
};

export default SocialMediaReview;